<template>
	<div id="signin">
		<div class="cover">
			<div id="leftPanel">
				<div id="leftTop">
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
                 <div id="leftBottom">
                    <ul>
                        <li>
                            <i class="fa fa-camera-retro"></i>
                            <span>彩票资讯</span>
                        </li>
                        <li>
                           <i class="fa fa-university" aria-hidden="true"></i>
                            <span>彩票管理</span>
                        </li>
                        <li>
                            <i class="fa fa-cog" aria-hidden="true"></i>
                            <span>彩票工具</span>
                        </li>
                        <li>
                            <i class="fa fa-bar-chart" aria-hidden="true"></i>
                            <span>数据图表</span>
                        </li>
                    </ul>
                </div>
			</div>
			<div id="rightPanel">
				<!--
					使用el-from表单验证
					model:是要验证的对象
					rules:要验证的各种规则
					ref:给el-form元素标记,方便确定是否全部通过验证
				-->
				<el-form :model="userInfo" :rules='rules' ref='userInfo'>
					<ul>
	                    <li style="font-size: 40px;color: white;">
	                      	 可米彩票
	                    </li>
	                    <li style="width: 80%;">
	                    	<!--
	                    		如果要验证el-form表单里的元素,这些元素
	                    		就需要放到el-form-item元素
	                    		其中el-form-item元素的prop属性和
	                    		验证规则里的属性名保持一致,
	                    		也就是你想验证哪个属性就喝哪个验证属性名保持一致
	                    	-->
	                    	<el-form-item prop='accountName'>
		                        <el-input placeholder="请输入用户名"
		                        class='userInput'
		                        v-model='userInfo.accountName'
		                        />
	                        </el-form-item>
	                    </li>
	                    <li style="width: 80%;">
	                    	<el-form-item prop='password'>
		                        <el-input placeholder="请输入密码"
		                         type="password"
		                         class="userInput"
		                         v-model='userInfo.password'
		                         />
	                         </el-form-item>
	                    </li>
	                    <li style="text-align: left;padding-left: 0px;">
	                    	<el-switch
	                    		active-color='#13ce66'
	                    		inactive-color='#ff4949'
	                    		v-model='remember'
	                    	>
	                    	</el-switch>
	                    	<span style="color: white;margin-left: 10px;">记住密码</span>
	                    </li>
	                    <li>
	                    	<el-button type='primary' style='width: 100%;'
	                    		@click='signin'
	                    	>登录</el-button>
	                    </li>
	                </ul>
                </el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				userInfo:{},
				//校验规则
				rules:{
					//校验用户名的规则
					accountName:[
						/*
							required:true 必填
							message:不符合规则的时候,弹出的提示
							trigger:在什么时候执行这个校验
						 * */
						{required:true,message:'用户名不能为空',trigger:'blur'},
						{min:2,max:20,message:'字符不能少于2个字符',trigger:'blur'}
					],
					//密码的验证规则
					password:[
						{required:true,message:'密码不能为空',trigger:'blur'},
						{min:5,max:12,message:'密码不能少于5个字符',trigger:'blur'}
					]
				},
				remember:true
			}
		},
		methods:{
			signin(){
				this.$refs['userInfo'].validate((valid) => {
					if(valid){
						//当所有的验证通过之后,执行这个代码块
						this.$http.post(this.$apis.signIn,this.userInfo)
						.then((resp)=>{
							//登录成功,将返回的数据存储到localStorage
							console.log(resp)
							if(resp.data.success){
								localStorage.setItem('remember',this.remember);
								localStorage.setItem('token',resp.data.token);
								localStorage.setItem('response',JSON.stringify(resp.data.response));
								//登录成功跳转到原来想要跳转的页面(组件)
								if(this.$route.query.redirect){
									console.log(this.$router)
									this.$router.push(this.$route.query.redirect);
								}else{
									//如果没有重定向的路径,则默认跳转到Home路径下
									this.$router.push('/Home')
								}
							}else{
								//登录失败,弹出提示,使用登录失败
								this.$message.error('登录失败,请重新登录');
							}
						})
					}else{
						//如果还有未通过验证的,则执行该代码块
						//console.log('error submit!!');
						console.log('还有为通过验证的,请注意');
						return  false;
					}
				})
			}
		}
	}
</script>

<style lang="scss" >
	#signin {
        width: 100%;
        height: 100%;
        background:url('../../assets/loginBG.jpg') no-repeat;
        background-size: cover;
        .cover {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display:flex;
            flex-direction:row;
            #leftPanel {
                width: 70%;
                height: 100%;
                #leftTop {
                    width: 100%;
                    height: 70%;
                    display: flex;
                    justify-content: center;
                    align-items: center; 
                    .circle {
                        width: 200px;
                        height: 200px;
                        border-radius: 50%;
                        &:nth-child(1){
                            position: absolute;
                            top: 20%;
                            background:rgba(240, 197, 158, 0.3);
                        }
                        &:nth-child(2){
                            position: absolute;
                            top: 35%;
                            left: 33%;
                            background:rgba(85, 212, 191,0.3);
                        }
                        &:nth-child(3){
                            position: absolute;
                            left: 23%;
                            top: 35%;
                            background:rgba(82, 89, 197,0.3);
                        }
                    }
                }
                #leftBottom {
                    width: 100%;
                    height: 30%;
                    ul {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction:row;
                        justify-content: center;
                        li {
                            margin-left: 80px;
                            display: flex;
                            flex-direction: column;
                            color: rgba(255, 255, 255, 0.5);
                            span {
                                margin-top:20px;
                                text-align: center;
                            }
                            i {
                                font-size: 60px;
                            }
                        }
                    }
                }
            }
             #rightPanel{
                width: 30%;
                height: 100%;
                background: rgba(0,0,0,0.7);
                ul {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    li {
                        text-align: center;
                        margin-bottom: 20px;
                        width: 80%;
                        .userInput {
                            width: 100%;
                            text-align: center;
                            .el-input__inner {
                                background:rgba(0,0,0,0);
                                width: 100%;
                            }
                        }
                    }
                    
                }
            }
        }
    }
</style>